<template>
	<view class="comment-list">
		<block v-if="show">
			<view class="comment-list-tabs">
				<view :class="['comment-list-tabs-item',{active: tabIndex==index}]" v-for="(data,index) in tabs" :key="index" @click="change(index)">
				{{data.name}} (<block v-if="index==0">{{count}}</block><block v-else>{{image_count}}</block>)
				</view>
			</view>
			<view class="comment-list-box">
				<block v-if="commentList.length">
					<view class="comment-item" v-for="(data,index) in commentList" :key="index">
						<view class="comment-item-user">
							<image :lazy-load="true" :src="data.headimgurl" mode="aspectFill"></image>
							<view class="comment-item-user-info">
								<view class="comment-item-user-name">{{data.user_name}}<text class="time">{{data.add_time}}</text></view>
								<view class="comment-item-user-time">
									<text class="attributes">{{data.color}} {{data.lining}} {{data.size}}</text>
								</view>
							</view>
						</view>
						<view class="comment-item-content">{{data.text}}</view>
						<view class="comment-item-imgs" v-if="data.comment_images">
							<image :lazy-load="true" :src="item" v-for="(item,i) in data.comment_images" :key="i" @click="prevImg(item,data.comment_images)"></image>
						</view>
						<view class="comment-reply" v-if="data.reply">
							<text>商家回复：</text>{{data.child_comment[0]}}
						</view>
					</view>
				</block>
			</view>
			<pt-loading-more v-if="isLoading"></pt-loading-more>
			<pt-nomore v-if="noMore && commentList.length"></pt-nomore>
			<pt-nothing
				v-if="noMore && !commentList.length"
				:fixed="true"
				:text="'暂无评论'"
				bg-color="#FFF" 
				top="102" 
				icon="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/nothing.png?v=1">
			</pt-nothing>
		</block>
		<pt-loading></pt-loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				goods_id: '',
				tabIndex: 0,
				tabs: [{
					name: '全部'
				},{
					name: '有图'
				}],
				count: 0,
				image_count: 0,
				commentList: [],
				page: 0,
				isLoading: false,
				noMore: false
			};
		},
		onLoad(options) {
			this.goods_id = options.goods_id
			this.init()
		},
		methods: {
			init(){
				this.$u.api.GoodsCommentList({goods_id: this.goods_id,is_image: this.tabIndex,page: this.page}).then(res => {
					this.show = true
					this.isLoading = false
					this.count = res.datas.count
					this.image_count = res.datas.image_count
					if(res.datas.list.length){
						res.datas.list.forEach(item => {
							this.commentList.push(item)
						})
					}else{
						this.noMore = true
					}
				})
			},
			change(index){
				this.tabIndex = index
				this.commentList = []
				this.noMore = false
				this.init()
			},
			prevImg(current,urls){
				uni.previewImage({
					current: current,
					urls: urls
				})
			}
		},
		onReachBottom() {
			if(!this.noMore){
				this.page++
				this.isLoading = true
				this.init()
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #FFF;
	}
	.comment-list{
		.comment-list-tabs{
			display: flex;
			justify-content: center;
			padding: 40rpx 40rpx 0;
			.comment-list-tabs-item{
				width: 240rpx;
				height: 62rpx;
				line-height: 58rpx;
				transition: all .5s;
				text-align: center;
				border: 2rpx solid rgba(230,230,230,1);
				font-size: 28rpx;
				color: #808080;
				&:first-child{
					border-radius: 4rpx 0px 0 4rpx;
					border-right: none;
				}
				&:last-child{
					border-radius: 0px 4rpx 4rpx 0px;
				}
				&.active{
					background-color: #000;
					color: #FFF;
				}
			}
		}
		.comment-list-box{
			.comment-item{
				padding: 50rpx 30rpx;
				position: relative;
				&::after{
					content: '';
					position: absolute;
					bottom: 0;
					right: 30rpx;
					left: 116rpx;
					height: 2rpx;
					background-color: #F4F4F4;
				}
				&:last-child::after{
					display: none;
				}
				.comment-item-user{
					display: flex;
					align-items: center;
					image{
						width: 66rpx;
						height: 66rpx;
						border-radius: 50%;
					}
					.comment-item-user-info{
						flex: 1;
						min-width: 0;
						margin-left: 20rpx;
						.comment-item-user-name{
							font-size: 24rpx;
							font-weight: bold;
							color: #333;
							margin-bottom: 10rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;
							.time{
								font-weight: normal;
								color: #999;
							}
						}
						.comment-item-user-time{
							font-size: 22rpx;
							color: #909090;
							text{
								margin-right: 20rpx;
							}
						}
					}
				}
				.comment-item-content{
					margin-left: 86rpx;
					padding: 40rpx 0 0;
					font-size: 28rpx;
					line-height: 48rpx;
					color: #141414;
				}
				.comment-item-imgs{
					margin-left: 86rpx;
					image{
						width: 188rpx;
						height: 188rpx;
						border-radius: 4rpx;
						margin-right: 20rpx;
						margin-top: 40rpx;
						&:nth-child(3n){
							margin-right: 0;
						}
					}
				}
				.comment-reply{
					margin-left: 86rpx;
					margin-top: 40rpx;
					padding: 25rpx;
					position: relative;
					background-color: #F8F8F8;
					color: #757575;
					font-size: 24rpx;
					line-height: 48rpx;
					&::after{
						position: absolute;
						content: '';
						width: 0;
						height: 0;
						border-left: 10rpx solid transparent;
						border-right: 10rpx solid transparent;
						border-bottom: 10rpx solid #F8F8F8;
						top: -10rpx;
						left: 20rpx;
					}
				}
			}
		}
	}
</style>
